<style>
.examfailList-container {
    height: 100%;
    width: 100%;
    background: #f0f0f0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.better-scroll {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.better-scroll-box {
    padding-bottom: 120px;
}

.exam-content {
    padding: 0 10px;
    min-height: 240px;
}

.exam-sum {
    font-size: 14px;
    height: 26px;
    line-height: 26px;
    color: #999999;
    padding-left: 20px;
}

.exam-card {
    padding: 0 10px;
    border-radius: 10px;
}

.exam-top {
    background: #fff;
    display: block;
    color: #333333;
    font-size: 14px;
    padding: 10px 10px 0 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.exam-img {
    width: 100%;
    display: block;
}

.exam-img img {
    display: block;
    width: 100%;
}

.exam-bottom {
    display: block;
    background: #fff;
    padding: 0 10px 0px 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 14px;
}

.exam-reset-exam {
    box-sizing: border-box;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    width: 100%;
    background: url('../images/button_exam.png') no-repeat;
    background-size: 100% 100%;
}

.exam-bottom ul li {
    display: flex;
    height: 40px;
}

.exam-bottom ul li img {
    display: block;
    height: 20px;
    width: 20px;
    margin-right: 10px;
}
.exam-bottom ul li span {
   box-sizing: inherit!important;
}
.exam-key {
    text-align: right;
    font-size: 14px;
    color: #999;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: flex-end;
}
.none{
    display: none;
}
.block{
    display: block;
}
</style>
<template>
    <div class="examfailList-container">
        <div class="better-scroll">
            <div class="better-scroll-box">

                <div class="exam-content" v-for="(item, index) in failexamList">
                    <div class="exam-sum"></div>
                    <div class="exam-card">
                        <div class="exam-top">
                            <span class="selectflag" v-if="item.QUESTION_LIST.QUESTION_TYPE==2">多选</span>
                            <span class="selectflag" v-else>单选</span>
                         <span>{{index+1}}.{{item.QUESTION_LIST.QUESTION_NAME}}</span></div>
                        <div class="exam-img"><img src="../images/examcardbg.png" alt=""></div>
                        <div class="exam-bottom">
                            <ul>
                                <li v-for="(item1, index1) in item.QUESTION_LIST.examOptList">
                                <img  v-if="item1.OPTION_CODE_error" src="../images/X.png"  alt="">
                                <img   v-else src="../images/kong.png" alt="">
                                
                                <span>{{item1.OPTION_CODE}}、{{item1.OPTION_CONTENT}}</span>
                                </li>
                               <!--  <li><img src="../images/kong.png" alt=""><span>A、商家名称</span></li>
                                <li><img src="../images/X.png" alt=""><span>A、商家名称</span></li>
                                <li><img src="../images/Ok.png" alt=""><span>A、商家名称</span></li> -->
                            </ul>
                            <div class="exam-key">
                                <span>正确答案：{{item.QUESTION_LIST.RIGHT_ANSWERS}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            
            </div>
        </div>
        <div class="exam-reset-exam" @click="examReset">重新考试</div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
    data() {
        return {
            failexamList: [{
                ERROR_ANSWERS:['A','B'],
                QUESTION_LIST:{
                    RIGHT_ANSWERS:'AC',
                    QUESTION_NAME:'12333333',
                    examOptList:[{
                        OPTION_CODE:'A',
                        OPTION_CONTENT:'12312312'
                    },{
                        OPTION_CODE:'B',
                        OPTION_CONTENT:'12312312'
                    },{
                        OPTION_CODE:'C',
                        OPTION_CONTENT:'12312312'
                    }]
                }
            }],
        }
    },
    created(){
         var that=this
        that.$data.failexamList=that.$route.params.ERROR_ANSWERS
        //console.log(that.$data.failexamList)
        for (var i = 0; i < that.$data.failexamList.length; i++) {
            //console.log(that.$data.failexamList[i])
            for (var j = 0; j < that.$data.failexamList[i].QUESTION_LIST.examOptList.length; j++) {
                //console.log(that.$data.failexamList[i].QUESTION_LIST.examOptList[j])
                for (var z = 0; z < that.$data.failexamList[i].ERROR_ANSWERS.length; z++) {
                    if (that.$data.failexamList[i].ERROR_ANSWERS[z]==that.$data.failexamList[i].QUESTION_LIST.examOptList[j].OPTION_CODE) {
                        //console.log(that.$data.failexamList[i].ERROR_ANSWERS[z])
                        that.$data.failexamList[i].QUESTION_LIST.examOptList[j].OPTION_CODE_error=that.$data.failexamList[i].ERROR_ANSWERS[z]
                    }
                    
                }
            }
        }
    },
    mounted() {
        // console.log(this.$route.params.ERROR_ANSWERS)
         var that=this
        // that.$data.failexamList=that.$route.params.ERROR_ANSWERS
        //console.log(that.$data.failexamList)
      
         this.$nextTick(function () {
       let scroll = new BScroll('.better-scroll', {
            scrollY: true,
            click: true
        })
      })
        
    },
    methods: {
        examReset() {
            var that=this
            this.$router.replace({ name: 'examSystem',params: {userData:that.$route.params.userData } });
        }

    }
}
</script>